<template>
	<el-container style="height:100vh;">
	  <el-aside width="200px">
		  <el-menu
		        default-active="1"
		        @select="handleSelect">
		        <el-menu-item index="barConfig">
		          <i class="el-icon-menu"></i>
		          <span slot="title">柱状图配置</span>
		        </el-menu-item>
		        <el-menu-item index="lineConfig">
		          <i class="el-icon-menu"></i>
		          <span slot="title">折线图配置</span>
		        </el-menu-item>
		        <el-menu-item index="pieConfig">
		          <i class="el-icon-menu"></i>
		          <span slot="title">饼状图配置</span>
		        </el-menu-item>
		        <el-menu-item index="radarConfig">
		          <i class="el-icon-menu"></i>
		          <span slot="title">雷达图配置</span>
		        </el-menu-item>
		        <el-menu-item index="gaugeConfig">
		          <i class="el-icon-menu"></i>
		          <span slot="title">仪表盘配置</span>
		        </el-menu-item>
		      </el-menu>
	  </el-aside>
	  <el-main>
		  <router-view></router-view>
	  </el-main>
	</el-container>
	
</template>
<script>
	 export default {
	    methods: {
	      handleSelect(key, keyPath) {
			  if(key === 'barConfig'){
				  this.$router.push("/index/barConfig")
			  }else if(key === 'lineConfig'){
				  this.$router.push("/index/lineConfig")
			  }else if(key === 'pieConfig'){
				  this.$router.push("/index/pieConfig")
			  }else if(key === 'radarConfig'){
				  this.$router.push("/index/radarConfig")
			  }else if(key === 'gaugeConfig'){
				  this.$router.push("/index/gaugeConfig")
			  }
		  }
	    }
	  }
</script>
<style scoped>
	
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
	padding: 0;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>